<template>
  <el-container style="height: 100vh">
    <!-- 侧边栏 -->
    <el-aside :width="isCollapsed ? '64px' : '200px'" class="custom-aside">
      <!-- LOGO 区域 -->
      <div class="logo-container">
        <img src="@/assets/logo.png" alt="Logo" class="logo-image" />
        <span v-if="!isCollapsed" class="logo-title">就业信息系统</span>
      </div>

      <!-- 自定义菜单 -->
      <el-menu
          :collapse="isCollapsed"
          :default-active="activeTab"
          background-color="#1f2d3d"
          text-color="#fff"
          active-text-color="#409EFF"
          class="custom-menu"
          @select="addTab"
      >
        <el-menu-item index="Home">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="NoticePublish">
          <i class="el-icon-message"></i>
          <span slot="title">公告发布</span>
        </el-menu-item>
        <el-menu-item index="PersonnelList">
          <i class="el-icon-user"></i>
          <span slot="title">实习岗位</span>
        </el-menu-item>
        <el-menu-item index="Reports">
          <i class="el-icon-document"></i>
          <span slot="title">体检报告</span>
        </el-menu-item>
        <el-menu-item index="TjryView">
          <i class="el-icon-s-custom"></i>
          <span slot="title">体检人员</span>
        </el-menu-item>
        <el-menu-item index="Tjdj">
          <i class="el-icon-edit"></i>
          <span slot="title">体检登记</span>
        </el-menu-item>
        <el-menu-item index="Dwgl">
          <i class="el-icon-office-building"></i>
          <span slot="title">单位管理</span>
        </el-menu-item>
        <el-menu-item index="Dwfzgl">
          <i class="el-icon-menu"></i>
          <span slot="title">单位分组管理</span>
        </el-menu-item>
        <el-menu-item index="Grzdgl">
          <i class="el-icon-tickets"></i>
          <span slot="title">个人账单管理</span>
        </el-menu-item>
        <el-submenu index="charge-settings">
          <template slot="title">
            <i class="el-icon-money"></i>
            <span>收费设置</span>
          </template>
          <el-menu-item index="Lcxm">临床项目管理</el-menu-item>
          <el-menu-item index="Sfxm">收费项目管理</el-menu-item>
        </el-submenu>
        <el-menu-item index="Xtcs">
          <i class="el-icon-setting"></i>
          <span slot="title">系统参数</span>
        </el-menu-item>
        <el-menu-item index="Xxgl">
          <i class="el-icon-user-solid"></i>
          <span slot="title">个人信息</span>
        </el-menu-item>
      </el-menu>

      <!-- 折叠按钮 -->
      <div class="collapse-btn" @click="isCollapsed = !isCollapsed">
        <i :class="isCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
      </div>
    </el-aside>

    <!-- 主区域 -->
    <el-container>
      <el-header class="custom-header">
        <div class="header-right">
          <el-dropdown trigger="click">
            <span class="user-info">
              <img class="user-avatar" src="@/assets/logo.png" alt="用户头像" />
              <span class="user-name">张三</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item @click.native="showChangePwd = true">修改密码</el-dropdown-item>
              <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab">
          <el-tab-pane
              v-for="tab in tabs"
              :key="tab.name"
              :label="tab.title"
              :name="tab.name"
              :closable="tab.name !== 'Home'">
            <transition name="fade-slide" mode="out-in">
              <keep-alive>
                <component :is="tab.component" v-if="activeTab === tab.name" @hook:beforeMount="startLoading" @hook:mounted="endLoading" />
              </keep-alive>
            </transition>
            <el-loading :fullscreen="false" :lock="true" v-if="loading" text="加载中..." />
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <!-- 修改密码弹窗 -->
      <el-dialog title="修改密码" :visible.sync="showChangePwd" width="350px">
        <el-form :model="pwdForm" label-width="80px">
          <el-form-item label="原密码">
            <el-input v-model="pwdForm.oldPwd" type="password" />
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="pwdForm.newPwd" type="password" />
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="showChangePwd = false">取 消</el-button>
          <el-button type="primary" @click="handleChangePwd">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>
  </el-container>
</template>

<script>
import Home from "./Home.vue";
import NoticePublish from "./NoticePublish.vue";
import PersonnelList from "./PersonnelList.vue";
import Reports from "./Reports.vue";
import TjryView from "./TjryView.vue";
import Xtcs from "./Xtcs.vue";
import Xxgl from "./Xxgl.vue";
import Lcxm from "./Lcxm.vue";
import Sfxm from "./Sfxm.vue";
import Dwgl from "./Dwgl.vue";
import Dwfzgl from "./Dwfzgl.vue";
import Grzdgl from "./Grzdgl.vue";
import Tjdj from "./Tjdj.vue";

export default {
  data() {
    return {
      isCollapsed: false,
      tabs: [
        {
          name: 'Home',
          title: '首页',
          component: Home,
        },
      ],
      activeTab: 'Home',
      showChangePwd: false,
      pwdForm: {
        oldPwd: "",
        newPwd: "",
      },
      loading: false,
      componentMap: {
        Home: {
          title: "首页",
          component: Home,
        },
        NoticePublish: {
          title: "公告发布",
          component: NoticePublish,
        },
        PersonnelList: {
          title: "实习岗位",
          component: PersonnelList,
        },
        Reports: {
          title: "体检报告",
          component: Reports,
        },
        TjryView: {
          title: "体检人员",
          component: TjryView,
        },
        Tjdj: {
          title: "体检登记",
          component: Tjdj,
        },
        Dwgl: {
          title: "单位管理",
          component: Dwgl,
        },
        Dwfzgl: {
          title: "单位分组管理",
          component: Dwfzgl,
        },
        Grzdgl: {
          title: "个人账单管理",
          component: Grzdgl,
        },
        Xtcs: {
          title: "系统参数",
          component: Xtcs,
        },
        Xxgl: {
          title: "个人信息",
          component: Xxgl,
        },
        Lcxm: {
          title: "临床项目管理",
          component: Lcxm,
        },
        Sfxm: {
          title: "收费项目管理",
          component: Sfxm,
        },
      },
    };
  },
  methods: {
    addTab(name) {
      if (name === 'Home') {
        this.activeTab = 'Home';
        return;
      }
      if (!this.tabs.find((tab) => tab.name === name)) {
        this.tabs.push({
          name,
          title: this.componentMap[name].title,
          component: this.componentMap[name].component,
        });
      }
      this.activeTab = name;
    },
    // 关闭标签页
    removeTab(name) {
      if (name === 'Home') return;
      const index = this.tabs.findIndex((tab) => tab.name === name);
      this.tabs.splice(index, 1);
      if (this.activeTab === name && this.tabs.length > 0) {
        this.activeTab = this.tabs[Math.max(index - 1, 0)].name;
      }
    },
    // 退出登录
    logout() {
      localStorage.removeItem("isLoggedIn");
      this.$emit("logout");
    },
    // 修改密码模拟
    handleChangePwd() {
      if (!this.pwdForm.oldPwd || !this.pwdForm.newPwd) {
        this.$message.error("请填写完整信息");
        return;
      }
      this.$message.success("密码修改成功（模拟）");
      this.showChangePwd = false;
      this.pwdForm.oldPwd = "";
      this.pwdForm.newPwd = "";
    },
    startLoading() {
      this.loading = true;
    },
    endLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 350); // 动画和加载感知
    },
  },
};
</script>

<style scoped>
/* 侧边栏样式 */
.custom-aside {
  background-color: #1f2d3d;
  color: white;
  display: flex;
  flex-direction: column;
  transition: width 0.3s;
}

/* LOGO 样式 */
.logo-container {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid #2c3e50;
}

.logo-image {
  height: 32px;
}

.logo-title {
  margin-left: 10px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  white-space: nowrap;
}

/* 菜单美化 */
.custom-menu {
  border-right: none;
  flex: 1;
}

/* 折叠按钮 */
.collapse-btn {
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  border-top: 1px solid #2c3e50;
  color: #fff;
  font-size: 16px;
}

.custom-header {
  background: #fff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #333;
  font-size: 14px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
}

.user-name {
  margin-right: 4px;
}

.fade-slide-enter-active, .fade-slide-leave-active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-slide-enter, .fade-slide-leave-to {
  opacity: 0;
  transform: translateY(24px);
}
</style>
